<template>
  <div class="flex-column-center" style="margin-top: 100px;">
    <table class="personinfo-table">
      <tr>
        <td>考生姓名</td>
        <td>{{examineeinfo.username}}</td>
      </tr>
      <tr>
        <td>性别</td>
        <td>{{examineeinfo.sex}}</td>
      </tr>
      <tr>
        <td>电话</td>
        <td>{{examineeinfo.userphone}}</td>
      </tr>
      <tr>
        <td>身份证号</td>
        <td>{{examineeinfo.idnumber}}</td>
      </tr>
      <tr>
        <td>警种</td>
        <td>{{examineeinfo.policeclass}}</td>
      </tr>
      <tr>
        <td>警号</td>
        <td>{{examineeinfo.usernum}}</td>
      </tr>
      <tr>
        <td>单位</td>
        <td>{{examineeinfo.unit}}</td>
      </tr>
      <tr>
        <td>职务</td>
        <td>{{examineeinfo.job}}</td>
      </tr>
      <tr>
        <td>电子邮箱</td>
        <td>{{examineeinfo.emal}}</td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center;">
          <Button type="primary" @click="selectSimu" long>
            模拟考试考核
          </Button>
        </td>
      </tr>
      <tr>
        <td colspan="2" style="text-align: center;">
          <Button type="primary" @click="startExam" long>正式考试考核</Button>
        </td>
      </tr>

      <tr>
        <td colspan="2" style="text-align: center;">
          <Button type="primary" @click="changedRoleInfo" long>
            修改个人资料
          </Button>
        </td>
      </tr>

      <tr>
        <td colspan="2" style="text-align: center;">
          <Button type="primary" @click="changedPassword" long>
            修改密码
          </Button>
        </td>
      </tr>
    </table>
    <div style="padding: 8px;width: 100%;position: absolute;bottom: 20px;">
      <Button type="error" long @click="loginout">退出登陆</Button>
    </div>

    <!-- 开始答题按钮触发 -->
    <Modal
        title="选择试卷"
        v-model="selectpaper" width="60%;">
        <Table border ref="selection" :columns="columns" :data="papers"></Table>
        <div slot="footer">

        </div>
    </Modal>
    <!-- 模拟考试按钮触发 -->
    <Modal
        title="选择难度"
        v-model="selectdiff" :width="1366">
        <Row style="margin: 10px 0px;">
          <label>试卷名称</label>
          <Input v-model="condition.testtitle" placeholder="请输入试卷名称" clearable style="width: 200px"></Input>
          <!-- <label style="margin-left: 10px;">出卷人</label>
          <Input v-model="value14" placeholder="请输入出卷人" clearable style="width: 150px"></Input>
          <label style="margin-left: 10px;">考试时间</label>
          <DatePicker type="daterange" split-panels placeholder="选择时间" style="width: 200px"></DatePicker> -->
          <span style="margin: 0px 10px;">
            <button type="button" class="ivu-btn ivu-btn-primary" @click="search($getCondition(condition))">
              <i class="ivu-icon ivu-icon-search"></i>
              <span>查询</span>
            </button>
          </span>
      </Row>
      <Table :columns="simucolumns" :data="model.rows" border></Table>
      <Row style="margin: 10px 0px;">
          <Page :total="model.count" :page-size="model.pageSize" show-elevator style="text-align: center;" @on-change="loadPage"></Page>
      </Row>
    </Modal>
    <!-- 修改密码按钮触发 -->
    <Modal
        title="修改密码"
        v-model="changePs" @on-visible-change="changedClose">
        <Form ref="formValidate" :model="ps" :label-width="120">
          <FormItem label="输入原始密码" prop="changepassword">
              <Input v-model="ps.password" type="password" placeholder="输入原始密码"></Input>
          </FormItem>
          <FormItem label="输入新密码" prop="userphone">
              <Input v-model="ps.newpassword" type="password" placeholder="输入新密码"></Input>
          </FormItem>
          <FormItem label="重复新密码" prop="userphone">
              <Input v-model="ps.renewpassword" type="password" placeholder="重复新密码"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="primary" size="large" long  @click="changePsConfirm()">确定</Button>
        </div>

    </Modal>
    <!-- 修改个人信息按钮触发 -->
    <Modal
        title="修改个人信息"
        v-model="changeinfo">
        <Form :model="role" :label-width="80">
          <FormItem label="姓名" prop="username">
              <Input v-model="role.username" placeholder="输入姓名"></Input>
          </FormItem>
          <FormItem label="性别">
              <RadioGroup v-model="role.sex">
                  <Radio label="男">男</Radio>
                  <Radio label="女">女</Radio>
              </RadioGroup>
          </FormItem>
          <FormItem label="身份证号" prop="idnumber">
              <Input v-model="role.idnumber" placeholder="输入身份证号"></Input>
          </FormItem>
          <FormItem label="电话号码" prop="userphone">
              <Input v-model="role.userphone" placeholder="输入电话号码"></Input>
          </FormItem>
          <FormItem label="警种" prop="userphone">
              <Input v-model="role.policeclass" placeholder="输入警种"></Input>
          </FormItem>
          <FormItem label="警号" v-if="role.usertype === '考生'">
              <Input v-model="role.usernum" placeholder="输入警号"></Input>
          </FormItem>
          <FormItem label="单位" prop="userphone">
              <Input v-model="role.unit" placeholder="输入单位"></Input>
          </FormItem>
          <FormItem label="职务" prop="userphone">
              <Input v-model="role.job" placeholder="输入职务"></Input>
          </FormItem>
          <FormItem label="电子邮箱">
              <Input v-model="role.emal" placeholder="输入电子邮箱"></Input>
          </FormItem>
        </Form>
        <div slot="footer">
          <Button type="primary" size="large" long  @click="changeRiConfirm()">确定</Button>
        </div>

    </Modal>
  </div>
</template>

<script>
import axios from 'axios'
import PagedList from '@/plugins/PagedList.js'

export default {
    name: 'exam-person-info',
    mounted () {

    },
    data () {
      return {
        // 开始答题
        selectpaper: false,
        // 模拟考试
        selectdiff: false,
        model: new PagedList('rs/sql/singleTable_OrderBy', 20,
        {items: "'*'", tablename: "'testmodel'", orderitem: "'id desc'"}),
        condition: {
          testtitle: ''
        },
        // 修改密码
        changePs: false,
        ps: {
          password: '',
          newpassword: '',
          renewpassword: '',
          idnumber: ''
        },
        // 修改个人信息
        changeinfo: false,
        role: {
          username: '',
          sex: '男',
          usernum: '',
          idnumber: '',
          userphone: '',
          unit: '',
          policeclass: '',
          job: '',
          emal: '',
        },
        // 试卷相关查询
        papers: [],
        columns: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
              title: '试卷名称',
              key: 'testtitle'
          },
          {
              title: '考试时长(分钟)',
              key: 'testtimelong'
          },
          {
              title: '总分',
              key: 'testnum'
          },
          {
              title: '操作',
              width: 100,
              align: 'center',
              render: (h, params) => {
                  return h('Button', {
                    props: {
                        type: 'text'
                    },
                    style: {
                      padding: '0'
                    },
                    on: {
                        click: () => {
                            this.realStart(params.row)
                        }
                    }
                  }, '开始考试');
              }
          }
        ],
        simucolumns: [
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 80
          },
          {
              title: '试卷名称',
              key: 'testtitle'
          },
          {
              title: '总分',
              key: 'testnum',
              align: 'center',
              width: 70
          },
          {
              title: '试卷类型',
              key: 'testtype',
              align: 'center',
              width: 100
          },
          {
              title: '试卷总数',
              key: 'testsum',
              align: 'center',
              width: 100
          },
          {
              title: '考试时长',
              key: 'testtimelong',
              align: 'center',
              width: 100
          },
          {
              title: '单选必选题',
              key: 'onesum',
              align: 'center',
              width: 100
          },
          {
              title: '多选必选题',
              key: 'doutsum',
              align: 'center',
              width: 100
          },
          {
              title: '判断必选题',
              key: 'judjsum',
              align: 'center',
              width: 100
          },
          {
              title: '操作',
              width: 100,
              align: 'center',
              render: (h, params) => {
                  return h('Button', {
                    props: {
                        type: 'text'
                    },
                    style: {
                      padding: '0'
                    },
                    on: {
                        click: () => {
                            this.realStartSimu(params.row)
                        }
                    }
                  }, '开始考试');
              }
          }
          // {
          //     title: '比选题',
          //     render: (h, params) => {
          //       return h('p', this.getStr2Arr())
          //     }
          // }
        ]
      }
    },
    methods: {
      // 开始考试相关
      startExam () {
        this.selectpaper = true
        axios.post('rs/sql/getusertestpaeper', {data: {userid: this.$store.state.examer.examineeinfo.userid,unit:this.$store.state.examer.examineeinfo.unit}}).then(res => {
          this.papers = res.data
        }).catch(error => {
          this.$Message.error('获取试卷列表失败')
        })
      },
      realStart (row) {
        let data = Object.assign({}, this.examineeinfo)
        data.usertest = row
        data.testid = row.id
        this.$router.push({
          name: 'notice',
          params: data
        })
      },
      // 模拟选择
      selectSimu () {
        this.selectdiff = true
        this.search('1=1')
      },
      search (condition) {
        this.model.search(condition)
      },
      loadPage (index) {
          // console.log(`加载第${index}页数据`);
          this.model.loadPage(index)
      },
      realStartSimu (row) {
        let data = Object.assign({}, this.examineeinfo)
        data.usertest = row
        data.testmodelid = row.id
        this.$router.push({
          name: 'notice',
          params: data
        })
      },
      // 修改个人信息相关方法
      changedRoleInfo () {
        this.role = Object.assign({}, this.examineeinfo)
        this.changeinfo = true
      },
      changeRiConfirm () {
        axios.post('rs/logic/changeuseinfo', this.role).then(res => {
          if (res.data.code === 200) {
            this.$store.commit('examLogin', this.role)
            this.changeinfo = false
          } else if (res.data.code === 500) {
            this.$Message.error('修改失败,' + res.data.msg);
          }
        }).catch(error => {
          this.$Message.error('修改个人信息失败');
        })
      },
      // 修改密码相关方法
      changedPassword () {
        this.changePs = true

      },
      changePsConfirm () {
        if (this.ps.newpassword !== this.ps.renewpassword) {
          this.$Message.error('两次密码不一致')
          return
        }
        this.ps.idnumber = this.examineeinfo.idnumber
        axios.post('rs/logic/changepass', this.ps).then(res => {
          if (res.data.code === 200) {
            this.$Message.success('密码修改成功');
            this.changePs = false
          } else if (res.data.code === 500) {
            this.$Message.error('密码修改失败,' + res.data.msg);
          } else {
            this.$Message.error('密码修改失败');
          }

        }).catch(error => {
          this.$Message.error('密码修改失败');
        })
      },
      changedClose (val) {
        if (!val) {
          this.ps = {
            password: '',
            newpassword: '',
            renewpassword: '',
            idnumber: ''
          }
        }
      },
      loginout () {
        // 退出登录
        axios.post('rs/logic/loginout',{data:{userid:this.$store.state.examer.examineeinfo.userid,usertype:"考生"}})
        .then(res=>{
          this.$store.commit('logout', this);
          this.$store.commit('clearOpenedSubmenu');
          this.$router.push({
              name: 'login'
          });
        })
        .catch(error => {
          this.$Message.error('网络错误，从新进行退出');
        })

      }
    },
    computed: {
      examineeinfo () {
        return this.$store.state.examer.examineeinfo
      }
    },
    // beforeRouteEnter (to, from, next) {
    //   next(vm => {
    //     vm.data = to.params
    //     vm.getTest()
    //   })
    // }
};
</script>
<style lang="less">
  .personinfo-table {
    width: 100%;
    font-size: 16px;
    color: #FFFFFF;
    font-weight: bold;
    padding: 20px;
     border-collapse:collapse;
  }
  .personinfo-table td {
     padding: 8px;
  }
  .personinfo-table tr > td:first-of-type {
    width:150px;
    text-align: right;
  }
</style>
